<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <script src="../jq/jquery-3.1.1.js">
        弹窗
    </script>
    <title>弹窗</title>
    <style>
        html,
        body {
            height: 100%;
            text-align: center;
        }
        
        body {
            margin: 0;
        }
        
        .first {
            width: calc(100% - 50px);
            height: 1000px;
            margin: 0 auto;
            background-color: powderblue;
            /*visibility: hidden;*/
            /*display: none;*/
        }
        
        input {
            border: none;
            width: 100px;
            height: 40px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        /*遮罩层*/
        .zhezhao {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1050px;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.2);
            z-index: 998;
            display: none;
        }

        /* 弹窗*/
        .second {
            position: absolute;
            left: 30%;
            top: 50%;
            width: 400px;
            background-color: white;
            display: none;
            z-index: 999;
        }
        
        .second label,
        .second input:nth-of-type(3) {
            cursor: pointer;
        }
        
        .second input {
            cursor: text;
        }
        
        .second .topT {
            background-color: #eee;
            font-size: 14px;
            font-weight: bold;
            height: 35px;
            line-height: 35px;
            cursor: move;
        }
        
        .second .closeT {
            position: absolute;
            top: 8px;
            right: 6px;
            cursor: pointer;
        }
        
        .second .bottomT {
            margin-top: 20px;
        }
        
        .second .bottomT input {
            border: 1px solid lightgray;
            height: 30px;
            width: 200px;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <div class="first">

    </div>
    <div class="zhezhao">

    </div>
    <div class="second">
        <div class="topT">
            用户登录
        </div>
        <div class="closeT">
            ×
        </div>
        <div class="bottomT">
            <label for="accout">账号：</label>
            <input type="text" id="accout" placeholder="请输入用户名"><br>
            <label for="password">密码：</label>
            <input type="password" id="password" placeholder="请输入密码"><br>
            <input type="button" value="登录">
        </div>
    </div>

    <input id="clickT" type="button" value="click">
</body>

</html>
<script>
    // 点击 click 让隐藏的遮罩层显示
    $('#clickT').click(function () {
        $('.zhezhao').css('display', 'block');
        $('.second').css('display', 'block');
    });

    // 点击'x' 让显示的遮罩层隐藏
    $('.closeT').click(function () {
        $('.zhezhao').css('display', 'none');
        $('.second').css('display', 'none');
    });

//    当文档加载后
    $(document).ready(function () {
        var x;
        var y;
        var divLeft;
        var divTop;
        // 鼠标按钮点下(.second：弹窗)
        $('.second').mousedown(function (e) {
            var offset = $(this).offset();
            // offset()相对于文档的偏移距离，top顶部，left左边
            // 取整数
            divLeft = parseInt(offset.left);
            divTop = parseInt(offset.top);
            console.log('鼠标按钮按下弹窗里左面的距离'+divLeft);
            // 获取光标在文档的坐标
            x = e.pageX;
            y = e.pageY;
            console.log('鼠标按钮按下光标在文档中的x='+x);
            // 为弹窗绑定一个光标移动事件
            // dragElement 拖拽元素(自定义)
            $(this).bind('mousemove',dragElement);
        });

        function dragElement(ev) {
            // 弹窗最终距离左面的距离 =
            // 鼠标按钮按下弹窗里左面的距离+(鼠标按钮按下，光标在文档中的x-鼠标移动时光标的x)
            var left = divLeft + (ev.pageX - x);
            // 鼠标移动时光标的x (因为为移动时 所以一直在变)
            console.log('鼠标移动时光标的x='+ev.pageX);
            var top = divTop + (ev.pageY - y);
            // 取得最终的值赋值给弹窗
            $(this).css(
                {
                    'top': top + 'px',
                    'left': left + 'px',
                });
            return false;
        }
        // 当鼠标按钮松开时把之前为弹窗绑定的 鼠标移动事件 解除
        $(document).mouseup(function () {
            $('.second').unbind('mousemove');
        });

    });

</script>